Description

Adds support for slotted content in the ion-icon component, enabling developers to use custom icons via any content type: font icons, SVGs, or other icon components.

Change Type

• Fix
• Feature
• Refactor
• Breaking Change
• Documentation
• Other (CI, chores, etc.)

Rationale / Problems Fixed

Provides flexibility for developers who want to use custom icon implementations alongside SVG icons. The slotted content support allows the ion-icon component to wrap and style various icon formats (font icons, custom SVGs, icon components) with a unified interface, while developers benefit from all of the ionic framework component styling applied to ion-icon.

Implementation Details

• Added <slot></slot> support to the ion-icon component JSX to accept slotted content
• Updated CSS to support flexbox layout for slotted content alignment
• Changed contain: strict to contain: layout style to allow better integration with slotted content
• Added ::slotted(*) styles to inherit font size from the host element for proper sizing
• Added visual regression tests for slotted content

Example Usage

<!-- Font icons -->
<ion-icon>
  <i class="fa fa-home"></i>
</ion-icon>

<!-- Slotted SVGs -->
<ion-icon>
  <svg>...</svg>
</ion-icon>

<!-- Other icon components -->
<ion-icon>
  <custom-icon></custom-icon>
</ion-icon>

Dev Build

8.0.14-dev.11785269740.1e15c0b8

Duplicates #1499 to merge into main